<template>
  <div class="user-container">
    <div class="user-nav">
      <p
        class="cate-item"
        :class="activeCateIndex == -1 ? 'active-cate' : ''"
        @click="clickCategory(-1)"
      >
        个人资料
      </p>
      <p
        class="cate-item"
        :class="activeCateIndex == 0 ? 'active-cate' : ''"
        @click="clickCategory(0)"
      >
        我的博客
      </p>
    </div>
    <div class="content">
      <user-info  v-if="activeCateIndex == -1"/>
      <user-blogs v-if="activeCateIndex == 0"/>
    </div>
  </div>
</template>

<script>
import UserInfo from './userInfo/index'
import UserBlogs from './userBlogs/index'
export default {
  name: "user",
  components: {
    UserInfo,
    UserBlogs
  },
  data() {
    return {
      activeCateIndex: -1,
    };
  },
  methods: {
    clickCategory(index) {
      this.activeCateIndex = index;
    },
  },
};
</script>

<style lang="scss" scoped>
.user-container {
  width: 100%;
  display: flex;
  justify-content: space-around;
}
.user-nav::-webkit-scrollbar {
  width: 0;
}
.user-nav {
  width: 10%;
  background: #fff;
  box-shadow: 0 0 10px #ccc;
  padding: 5px 0;
}
.cate-item {
  text-align: center;
  padding: 8px 0;
  font-size: 14px;
  cursor: pointer;
}
.active-cate {
  color: #409eff;
}
.content::-webkit-scrollbar {
  width: 0;
}
.content {
  overflow-y: auto;
  width: 90%;
  background: #fff;
  box-shadow: 0 0 10px #ccc;
  height: calc(100vh - 160px);
  padding: 20px;
  margin: 0 30px;
}
</style>